@function r($px){
  @return $px/75#{rem};
}
$mainColor:#ff801a;
$bg:#f5f5f5;
$headerFontColor:#666666;
$textMainColor:#333333;
$textSecondColor:#999999;
.coupon-container{
  height: 100vh;
  background: $bg;
  overflow: hidden;
  @at-root .coupon-page-hd{
   font-size:  0;
   @at-root .header_item{
     font-size: 16px;
     display: inline-block ;
     vertical-align: middle;
     width: 25%;
   }
   @at-root .header_left{

   }
   @at-root .header_middle{
     width: 50%;
     text-align: center;
     font-size: r(32);
   }
   @at-root .header_right{

   }
 }
  @at-root .credit-tradition{
    color: $textSecondColor;
    font-size: r(28);
    line-height: r(100);
    .@at-root .credit-tradition-active{
      color:#5b93ee;
    }
  }
  @at-root .coupon-page-bd{
    padding: 0 r(32);
    box-sizing: border-box;
    .coupon{
      height: r(260);
      background-color: #fff;
      overflow: hidden;
      position: relative;
      font-size: 0;
      @at-root .coupon-item_tag{
        display: inline-block;
        width: r(113);
        line-height: r(37);
        text-align: center;
        transform: rotate(-45deg) translate(r(-28) r(-12));
        background: $mainColor;
        color: #fff;
        position: absolute;
        font-size: 16px;
      @at-root .coupon-item{
        //height: inherit;
        display: inline-block;
        vertical-align: middle;
        font-size: r(22);
      }
      @at-root .coupon-item_left{
        width: r(234);
        @at-root .coupon-item_value{

        }
      }
      &::before,&::after{
        content: '';
        display: inline-block;
        width: r(30);
        height: r(30);
        border-radius: 50%;
        position: absolute;
        left: r(129);
        top: r(-15);
        bottom: r(-15);
        background: $bg;
      }
      &::after{
        top: unset;
      }
      @at-root .coupon-item_miaddle{
        width: r(363);
        padding: r(66) 0;
        //height: inherit;
      }
      @at-root .coupon-item_right{
         width: r(87);
         height: inherit;
         background: #ff801a;
         color:#fff;
         border-left: 1px dashed #eeeeee;
         @at-root .receive-coupon_content{
           width: inherit;
           height: inherit;
           display: table-cell;
           text-align: center;
         @at-root .receive-coupon_text{
          display: inline-block;
          width: 1em;
          height: 4rem;
          font-size: r(22);
        }
       }
      }
    }
  }
}

